<template>
  <div class="assess-container">
    <el-tabs v-model="activeTop" type="card" @tab-click="handleTop">
      <el-tab-pane label="项目1" name="1"></el-tab-pane>
    </el-tabs>
    <div class="assess-top">
      <div class="assess-top-left">
        <div class="group-border group-pad">
          <div class="assess-title">请设置参数</div>
          <div class="flex">
            <div class="assess-top-left-box1 group-pad group-border">
              <div class="debugging-handle-box">
                <el-button type="primary">新建</el-button>
                <el-button type="danger">删除</el-button>
              </div>
              <div class="list-group flex flex-align">
                <div class="list-title list-title-pad10">评估批次：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
              <div class="list-group flex flex-align">
                <div class="list-title list-title-pad10">重复卡次：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
              <div class="list-group flex flex-align">
                <div class="list-title list-title-pad10">单卡次数：</div>
                <el-select v-model="value" placeholder="">
                  <el-option v-for="item in options" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </div>
              <div class="list-group flex flex-align">
                <el-checkbox v-model="checked">自动检测有卡</el-checkbox>
              </div>
            </div>
            <div class="assess-top-left-box2 group-pad group-border">
              <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="16">
                    <div class="list-items">
                      <div class="list-title">子项：</div>
                      <el-select v-model="value" placeholder="">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                          :value="item.value"></el-option>
                      </el-select>
                      <div class="list-title">曲线序号：</div>
                      <el-select v-model="value" placeholder="">
                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                          :value="item.value"></el-option>
                      </el-select>
                    </div>
                  </el-col>
                  <el-col :span="8">
                    <div class="flex flex-align flex-end">
                      <el-button type="primary">新建</el-button>
                      <el-button type="danger">删除</el-button>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column label="对照值" align="center" width="100" fixed>
                  <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1
                    }}</template>
                </el-table-column>
                <el-table-column label="反应值" align="center">
                  <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
                </el-table-column>
                <el-table-column label="浓度值" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.sex == 1">男</span>
                    <span v-if="scope.row.sex == 2">女</span>
                  </template>
                </el-table-column>
                <el-table-column label="偏差" align="center">
                  <template slot-scope="scope">{{ scope.row.mobile }}</template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="assess-top-right">
        <div class="group-border group-pad">
          <div class="assess-title">评估结果</div>
          <div class="list-group">
            <el-row :gutter="20">
              <el-col :span="10">
                <div class="list-items">
                  <div class="list-title list-title-pad10">y=a+bx：</div>
                  <div class="list-title">a=</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="list-items">
                  <div class="list-title">b=</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="list-items">
                  <div class="list-title">c=</div>
                  <el-input placeholder="" v-model="value"></el-input>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="eacharts-group" id="eachartSingss" style="height:25vh;"></div>
        </div>
      </div>
    </div>
    <div class="debugging-handle-box">
      <el-button type="success" @click="handle(1)">进卡</el-button>
      <el-button type="danger" @click="handle(2)">丢卡</el-button>
      <el-button @click="handle(2)">测试</el-button>
      <el-button type="warning" @click="handle(2)">计算</el-button>
      <el-button type="danger" @click="handle(2)">删除</el-button>
      <el-button type="primary">评估</el-button>
    </div>
    <div class="assess-top">
      <div class="assess-bottom-left">
        <div class="group-border group-pad">
          <div class="eacharts-group" id="eachartSings" style="height:30vh;"></div>
        </div>
      </div>
      <div class="assess-bottom-right">
        <div class="group-border group-pad">
          <el-tabs v-model="activeTop" type="card" @tab-click="handleTop">
            <el-tab-pane label="T/C计算" name="1"></el-tab-pane>
            <el-tab-pane label="CV计算" name="1"></el-tab-pane>
          </el-tabs>
          <el-table :data="tableData" border ref="multipleTable" header-cell-class-name="table-header">
            <el-table-column label="数据项" align="center" width="100" fixed>
              <template slot-scope="scope">{{ scope.$index + (query.pageIndex - 1) * query.pageSize + 1 }}</template>
            </el-table-column>
            <el-table-column label="平均值" align="center">
              <template slot-scope="scope">{{ scope.row.nickname || scope.row.wechat_nickname }}</template>
            </el-table-column>
            <el-table-column label="标准偏差" align="center">
              <template slot-scope="scope">
                <span v-if="scope.row.sex == 1">男</span>
                <span v-if="scope.row.sex == 2">女</span>
              </template>
            </el-table-column>
            <el-table-column label="CV值" align="center">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
            <el-table-column label="最大值" align="center">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
            <el-table-column label="最小值" align="center">
              <template slot-scope="scope">{{ scope.row.mobile }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { isNumber } from 'lodash';
export default {
  name: 'assess',
  data() {
    return {
      activeTop: '1',
      value: '',
      options: [{ value: '1', label: '1' }, { value: '2', label: '2' }],
      tableData: [],
      checked: false
    };
  },
  mounted() {
    this.eachartSing([{ planNum: 10, signInDate: 30 }]);
    this.eachartSing1([{ planNum: 10, signInDate: 30 }]);
  },
  methods: {
    handleTop(e) {

    },
    handle() {

    },
    eachartSing(list) {
      var dom = document.getElementById('eachartSings');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      let option = {
        legend: {
          data: ['计划人数', '签到人数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: list.map(o => o.signInDate)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '计划人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.planNum)) ? Number(o.planNum) : 0))
          },
          {
            name: '签到人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.signInNum)) ? Number(o.signInNum) : 0))
          }
        ]
      };
      myChart.setOption(option);
    },
    eachartSing1(list) {
      var dom = document.getElementById('eachartSingss');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      let option = {
        legend: {
          data: ['计划人数', '签到人数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: list.map(o => o.signInDate)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '计划人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.planNum)) ? Number(o.planNum) : 0))
          },
          {
            name: '签到人数',
            type: 'line',
            stack: 'Total',
            data: list.map(o => (isNumber(Number(o.signInNum)) ? Number(o.signInNum) : 0))
          }
        ]
      };
      myChart.setOption(option);
    },
  }
};
</script>

<style lang="less">
.assess-container {
  padding: 0 10px;

  .assess-top {
    display: flex;

    .assess-top-left {
      width: 50%;
    }

    .assess-top-left-box1 {
      width: 40%;
      padding: 0 10px;
    }

    .assess-top-left-box2 {
      width: 58%;
      padding: 0 10px;
      margin-left: 2%
    }

    .assess-top-right {
      width: 50%;
      padding-left: 10px;
    }
  }

  .assess-bottom-left {
    width: 65%;
  }

  .assess-bottom-right {
    width: 35%;
    padding-left: 10px;
  }

  .assess-bottom-second {
    width: 25%;
    padding: 0 5px 0 10px;
  }

  .assess-bottom-three {
    width: 30%;
    padding: 0 10px 0 5px;
  }

  .list-group {
    padding: 6px 0;
  }


  .list-items {
    display: flex;
    align-items: center;
  }

  .list-title {
    font-size: 13px;
    color: #333;
    height: 32px;
    line-height: 32px;
    white-space: nowrap;
  }

  .list-title-right {
    text-align: right;
  }

  .list-title-pad10 {
    padding-right: 10px;
    min-width: 90px;
  }

  .flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .group-border {
    border: 1px solid #eee;
    border-radius: 6px;
  }

  .group-pad {
    padding: 0 10px 10px 10px;
  }

  .assess-title {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
  }

  .debugging-handle-box {
    padding: 10px 0;
  }
}
</style>